<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="./heroes.js"></script>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li
          :class="{active: current=== '全部'}"
          @click="currentList = heroes;current = '全部'"
        >
          全部
        </li>
        <li
          :class="{active: current === name}"
          v-for="(list, name) in parsedHeroes"
          @click="currentList = list;current = name"
        >
          {{name}}
        </li>
      </ul>

      <ul>
        <li v-for="h in currentList">{{h.name}}<mark>{{h.role}}</mark></li>
      </ul>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          heroes: heroes,
          currentList: this.heroes,
          current: "全部",
        },
        methods: {},
        computed: {
          parsedHeroes: function () {
            var obj = {};
            this.heroes.forEach((element) => {
              if (obj[element.role]) {
                obj[element.role].push(element);
              } else {
                // obj[element.role] = [element];
                obj[element.role] = [];
                obj[element.role].push(element);
              }
            });
            return obj;
          },
        },
      });
    </script>

    <script>
      // console.log(heroes);

      // [{role: "输出", id: 'damage', list :[......]},{},{}]

      // {"重装": [...]}
      var obj = {};
      heroes.forEach((element) => {
        // if (obj[element.role]) {
        //   obj[element.role].push(element);
        // } else {
        //   obj[element.role] = [element];
        // }
        obj[element.role] = [
          ...(obj[element.role] ? obj[element.role] : []),
          element,
        ];
      });
    </script>

    <!-- 选项卡  => 数组切换 奇数偶数 => heroes -->
  </body>
</html>
